<template>
	<statusBarVue title="项目编辑" :isShowBar="true" :isMyBgi="true" :isShowLeft="true" />

	<view class="project-editor-page" :style="pageHaveBarStyle">
		<view class="project-editor-page-group">
			<form class="form">
				<!-- <uni-forms ref="baseForm" class="form" :modelValue="baseFormData" :label-width="140"> -->
				<view class="chunk">
					<uni-forms-item label="施工类型" required>
						<picker :value="baseFormData.type1" :range="arrayType"
							@change="(e)=> { console.log(e);this.baseFormData.type1 = e.detail.value }">
							<text :class=" (baseFormData.type1!== undefined) ? '' : 'placeholder'">
								{{ (baseFormData.type1 !== undefined) ? arrayType[baseFormData.type1] : '请选择施工类型' }}
							</text>
							<uni-icons type="forward" size="12"></uni-icons>
						</picker>
					</uni-forms-item>
				</view>
				<view class="chunk">
					<uni-forms-item label="项目编号" required>
						<uni-easyinput v-model="baseFormData.num" :placeholderStyle="placeholderStyle"
							placeholder="请输入项目编号" primaryColor="#22A366" />
					</uni-forms-item>
					<uni-forms-item label="项目名称" required>
						<uni-easyinput v-model="baseFormData.name" :placeholderStyle="placeholderStyle"
							placeholder="请输入项目名称" primaryColor="#22A366" />
					</uni-forms-item>
					<uni-forms-item label="项目类型" required>
						<uni-easyinput v-model="baseFormData.type" :placeholderStyle="placeholderStyle"
							placeholder="请输入项目类型" primaryColor="#22A366" />
					</uni-forms-item>
				</view>
				<view class="chunk">
					<uni-forms-item label="所属客户" required>
						<picker :value="baseFormData.customer" :range="customerArr"
							@change="e=>this.baseFormData.customer=e.detail.value">
							<text :class=" (baseFormData.customer!== undefined) ? '' : 'placeholder'">
								{{ (baseFormData.customer !== undefined) ? customerArr[baseFormData.customer] : '请选择所属客户' }}
							</text>
							<uni-icons type="forward" size="12"></uni-icons>
						</picker>
					</uni-forms-item>
				</view>
				<view class="chunk">
					<uni-forms-item label="项目开始时间" required>
						<picker mode="date" :value="baseFormData.startTime"
							@change="(e)=> this.baseFormData.startTime = e.detail.value">
							<text :class=" baseFormData.startTime ? '' : 'placeholder'">
								{{ baseFormData.startTime ? baseFormData.startTime : '请选择项目开始时间' }}
							</text>
							<uni-icons type="forward" size="12"></uni-icons>
						</picker>
					</uni-forms-item>
					<uni-forms-item label="项目结束时间" required>
						<picker mode="date" :value="baseFormData.endTime"
							@change="(e)=> this.baseFormData.endTime = e.detail.value">
							<text :class=" baseFormData.endTime ? '' : 'placeholder'">
								{{ baseFormData.endTime ? baseFormData.endTime : '请选择项目结束时间' }}
							</text>
							<uni-icons type="forward" size="12"></uni-icons>
						</picker>
					</uni-forms-item>
				</view>
				<view class="chunk u-block">
					<uni-forms-item label="项目简介" required>
						<uni-easyinput class="input" type="textarea" maxlength="200"
							:placeholderStyle="placeholderStyle" v-model="baseFormData.describe"
							placeholder="请描述具体施工内容，方便工友带齐工具，节省双方时间(200个字以内)" />
					</uni-forms-item>
				</view>
				<view class="chunk u-block">
					<uni-forms-item label="注意事项" required>
						<uni-easyinput class="input" type="textarea" :placeholderStyle="placeholderStyle"
							maxlength="200" v-model="baseFormData.desce"
							placeholder="请描述具体施工内容，方便工友带齐工具，节省双方时间(200个字以内)" />
					</uni-forms-item>
				</view>
				<!-- </uni-forms> -->
			</form>

			<view class="submit">
				<button class="btn-submit">提交</button>
			</view>
		</view>
	</view>
</template>


<script>
	import statusBarVue from '@/components/statusBar.vue'

	import {
		publics
	} from '@/mixins/publics.js';

	export default {
		mixins: [publics],
		components: {
			statusBarVue
		},
		data() {
			return {
				placeholderStyle: `fontFamily: PingFangSC-Regular;font-weight: 400;font-size: 15px;color:#A5A5A7`,
				arrayType: ["施工类型一", "施工类型二", "施工类型三"],
				customerArr: [
					"客户一",
					"客户二",
					"客户三",
					"客户四",
				],
				pricePopupTabIndex: 0,
				// 基础表单数据
				baseFormData: {
					name: '',
					age: '',
					introduction: '',
					way: 0,
					endTime: '',
					startTime: '',
					datetimesingle: 1627529992399
				},
				// 单选数据源
				ways: [{
					text: '远程',
					value: 0
				}, {
					text: '线下',
					value: 1
				}],
				// 校验规则
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '姓名不能为空'
						}]
					},
					datetimesingle: {
						rules: [{
							required: true,
							errorMessage: '服务时间不能为空'
						}]
					},
					age: {
						rules: [{
							required: true,
							errorMessage: '年龄不能为空'
						}, {
							format: 'number',
							errorMessage: '年龄只能输入数字'
						}]
					}
				},
			}
		},
		onShareAppMessage(){
			// 监听用户右上角的转发
		},
		onShareTimeline(){
			// 监听用户右上角的分享到朋友圈
		},
		methods: {
			change(e, keyName) {
				this[keyName] = e;
			},
			openPriceInp() {
				this.$refs.pricePpopup.open('bottom')
			}
		}
	}
</script>


<style lang="less">
	textarea {
		box-sizing: border-box;
		height: 212px !important;
		padding: 6px 12px;
		margin: 0 !important;
		background: #F5F6FA;
		border-radius: 8px;
	}
	.project-editor-page {
		position: fixed;
		left: 0;
		right: 0;
		background-color: #F2F3F7;
		overflow: auto;
		z-index: 99;

		.project-editor-page-group {
			overflow: auto;
			padding: 12px 0;
			box-sizing: border-box;
		}

		.form {
			display: block;
			width: 94.67vw;
			margin: auto;
			margin-bottom: 15px;

			.chunk {
				padding: 0px 12px;
				background-color: #fff;
				margin: 5px auto;
				border-radius: 10px;

				&.u-block {
					.uni-forms-item {
						display: block !important;

						.uni-easyinput__content,
						.is-add {
							background: #F5F6FA !important;
							border-radius: 4px;
						}
					}
				}

				&>.uni-forms-item {
					border-bottom: 1px solid #EAEAEA;
					margin-bottom: 0;
					min-height: 32px;
					line-height: 32px;
					padding: 8px 0;

					.checklist-box:last-child {
						margin-right: 0;
					}

					.placeholder {
						font-family: PingFangSC-Regular;
						font-weight: 400;
						font-size: 15px;
						color: #A5A5A7;
						margin-right: 8px;
					}

					.uni-forms-item__label {
						width: 40% !important;
						height: auto;
						font-family: PingFangSC-SNaNpxibold;
						font-weight: bold;
						font-size: 15px;
						color: #1E1F23;

						.is-required {
							margin-right: 4px;
						}
					}

					.uni-data-checklist .checklist-group {
						height: 50px;
					}

					.input {
						.uni-easyinput__content {
							background: #F5F6FA !important;
							border-radius: 4px !important;
						}
					}
				}

				.uni-easyinput__content-input,
				.uni-forms-item__content {
					text-align: right;
				}

				.uni-easyinput__content {
					border: none;
				}

				.form-item-price {
					font-family: PingFangSC-SNaNpxibold;
					font-weight: 600;
					font-size: 15px;
					color: #F04B40;
				}


			}
		}

		.submit {
			width: 100%;
			height: auto;

			.btn-submit {
				width: 94.67vw;
				height: 45px;
				background: #22A366;
				border-radius: 8px;
				color: #fff;
				font-weight: 400;
				font-size: 17px;
			}
		}
	}
</style>